<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        Single Zoomable Waveform |
        <a href="/overview-waveform.html">Single Fixed Waveform</a> |
        <a href="/cue-events.html">Cue Events</a> |
        <a href="/set-source.html">Changing the Media URL</a> |
        <a href="/multi-channel.html">Multi-Channel Waveform</a> |
        <a href="/custom-markers">Custom Point and Segment Markers</a> |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        <a href="/scrollbar.html">Scrollbar</a>
      </p>
      <h2>Demo: Single Zoomable Waveform</h2>
      <p>
        This demo shows how configure Peaks.js to render a single zoomable
        waveform view.
      </p>

      <div class="waveform-container">
        <div id="zoomview-container"></div>
      </div>

      <div id="demo-controls">
        <audio id="audio" controls="controls">
          <source src="/TOL_6min_720p_download.mp3" type="audio/mpeg">
          <source src="/TOL_6min_720p_download.ogg" type='audio/ogg; codecs="vorbis"'>
          Your browser does not support the audio element.
        </audio>

        <div id="controls">
          <div>
            <label for="zoom">Zoom:</label>
            <select id="zoom"></select>
            <input type="text" id="seek-time" value="0.0">
            <button data-action="seek">Seek</button>
            <label for="amplitude-scale">Amplitude scale</label>
            <input type="range" id="amplitude-scale" min="0" max="10" step="1">
          </div>
          <div>
            <input type="text" id="start-time" value="0.0">
            <button data-action="set-start-time">Set start time</button>
          </div>
          <div>
            <label for="waveform-color">Waveform color</label>
            <input type="color" id="waveform-color" value="#00e180">
            <label for="played-waveform-color">Played waveform color</label>
            <input type="color" id="played-waveform-color" value="#bc6dfd">
          </div>
          <div>
            <label for="axis-label-color">Axis label color</label>
            <input type="color" id="axis-label-color" value="#aaaaaa">
            <label for="axis-gridline-color">Axis gridline color</label>
            <input type="color" id="axis-gridline-color" value="#cccccc">
          </div>
        </div>
      </div>
    </div>
    <div id="margin-right">
    </div>
    <script src="/peaks.js"></script>
    <script>
      (function(Peaks) {
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        var audioContext = new AudioContext();

        var options = {
          zoomview: {
            container: document.getElementById('zoomview-container'),
            waveformColor: '#00e180',
            playedWaveformColor: '#bc6dfd',
            showPlayheadTime: true
          },
          mediaElement: document.getElementById('audio'),
          webAudio: {
            audioContext: audioContext,
            scale: 128,
            multiChannel: false
          },
          zoomLevels: [128],
          keyboard: true
        };

        Peaks.init(options, function(err, peaksInstance) {
          if (err) {
            console.error(err.message);
            return;
          }

          console.log('Peaks instance ready');

          var zoomview = peaksInstance.views.getView('zoomview');

          var zoomLevels = [5, 10, 20, 30, 60, 120, 180, 'auto'];

          zoomview.setZoom({ seconds: zoomLevels[0] });

          var zoom = document.getElementById('zoom');

          for (var i = 0; i < zoomLevels.length; i++) {
            var text = zoomLevels[i] === 'auto' ? 'Fit width' : (zoomLevels[i] + " seconds");
            zoom.options[i] = new Option(text, i);
          }

          zoom.addEventListener('change', function(event) {
            var zoomLevel = zoomLevels[event.target.value];

            zoomview.setZoom({ seconds: zoomLevel });
          });

          document.querySelector('button[data-action="seek"]').addEventListener('click', function(event) {
            var time = document.getElementById('seek-time').value;
            var seconds = parseFloat(time);

            if (!Number.isNaN(seconds)) {
              peaksInstance.player.seek(seconds);
            }
          });

          var amplitudeScales = {
            "0": 0.0,
            "1": 0.1,
            "2": 0.25,
            "3": 0.5,
            "4": 0.75,
            "5": 1.0,
            "6": 1.5,
            "7": 2.0,
            "8": 3.0,
            "9": 4.0,
            "10": 5.0
          };

          document.getElementById('amplitude-scale').addEventListener('input', function(event) {
            var scale = amplitudeScales[event.target.value];
            var view = peaksInstance.views.getView();

            view.setAmplitudeScale(scale);
          });

          document.getElementById('waveform-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setWaveformColor(event.target.value);
          });

          document.getElementById('played-waveform-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setPlayedWaveformColor(event.target.value);
          });

          document.getElementById('axis-label-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setAxisLabelColor(event.target.value);
          });

          document.getElementById('axis-gridline-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView();

            view.setAxisGridlineColor(event.target.value);
          });

          document.querySelector('button[data-action="set-start-time"]').addEventListener('click', function(event) {
            var time = document.getElementById('start-time').value;
            var seconds = parseFloat(time);

            if (!Number.isNaN(seconds)) {
              var view = peaksInstance.views.getView();

              view.setStartTime(seconds);
            }
          });

          // Zoomview waveform events

          peaksInstance.on('zoomview.update', function(event) {
            console.log('zoomview.update:', event);
          });
        });
      })(peaks);
    </script>
  </body>
</html>
